

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue'; // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from 'swiper';
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

import { getBannerAPI } from '@/apis/home.js'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const bannerList = ref([])

const getBanner = async () => {
  const res = await getBannerAPI()
  console.log(res)
  bannerList.value = res
}

onMounted(() => getBanner())


//默认滑动效果（这里面注释掉的可以不要）
// const onSwiper = swiper => {
// 	console.log(swiper);
// };
// const onSlideChange = e => {
// 	// swiper切换的时候执行的方法
// 	console.log('slide change', e.activeIndex);
// };
// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
const modules = [Autoplay, Pagination, Navigation, A11y];


const handleClick = (url) => {
  router.push({
    path: url,
  })
}

</script>


<template>
  <div class="swiperbox">
    <swiper style="height:480px" :slidesPerView="1" :spaceBetween="30" :loop="true" :centeredSlides="true" :pagination="{
      clickable: true
    }" :autoplay="{
  delay: 2500,
  disableOnInteraction: false
}" :navigation="true" :modules="modules" class="mySwiper">

  <swiper-slide v-for="item in  bannerList" :key="item.id"><img style="width:100%" :src="item.imgurl" alt=""  @click='handleClick(item.hrefurl)' />
      </swiper-slide>




      <!-- <swiper-slide><img   style="width:100%" src="@/assets/images/2.jpg" alt="" /></swiper-slide>
      <swiper-slide><img  style="width:100%"  src="@/assets/images/3.jpg" alt="" /></swiper-slide>
      <swiper-slide><img   style="width:100%" src="@/assets/images/4.jpg" alt="" /></swiper-slide> -->
    </swiper>
  </div>
</template>

